<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-05-28 20:17
  *@LastEditTime 2020-05-28 20:17
  *@LastEdititors
-->
<template>
    <div id="editInfo">
      <Tittle :title="'编辑资料'"></Tittle>
      <div id="main" :style="{height:$inerHeight + 55 + 'px'}">
          <div class="avatar-area">
            <cube-upload ref="upload" v-model="files" action="http://112.126.100.206/uploadFile" @files-added="filesAdded">
              <div class="clear-fix avatar">
                <cube-upload-btn :multiple="false" class="avatar-btn">
                  <img :src="infoData.avatarUrl" alt="">
                </cube-upload-btn>
              </div>
            </cube-upload>
          </div>
          <div class="info">
            <div class="row">
              <div class="name">昵称</div>
              <input v-model="infoData.name" maxlength="10" placeholder="请输入昵称">
            </div>
            <div class="row" @click="showSexPicker">
              <div class="name">性别</div>
              <div style="margin-left:13px">{{infoData.sex ? '男': '女'}}</div>
              <i class="cubeic-select"></i>
            </div>
            <div class="row" @click="showAddressCascadePicker">
              <div class="name">地区</div>
              <div style="margin-left:13px">{{infoData.province+' '+infoData.city}}</div>
              <i class="cubeic-select"></i>
            </div>
            <div class="row">
              <div class="name">签名</div>
              <input v-model="infoData.sign" placeholder="这位同袍描述一下自己吧(*^▽^*)">
            </div>
          </div>
          <div class="update-btn" @click="updateInfo">确定</div>
          <div class="grey-area">
            完善资料可以让大家更了解你哦
          </div>
      </div>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
export default {
  name: 'EditInfo',
  components: {Tittle},
  created () {
    this.$province.forEach(pro => {
      pro.city instanceof Array && pro.city.forEach(cityItem => {
        cityItem.districtAndCounty = cityItem.districtAndCounty.map(xian => {
          let temp = {name: xian}
          return temp
        })
        cityItem.children = cityItem.districtAndCounty
        delete cityItem.districtAndCounty
      })
      pro.children = pro.city
      delete pro.city
    })
    this.province = this.$province
  },
  mounted () {
    this.getData()
    this.cascadePicker = this.$createCascadePicker({
      title: '选择地址',
      data: this.province,
      selectedIndex: [0, 0, 0],
      onSelect: this.selectHandle,
      alias: {
        value: 'name', text: 'name'
      }})
  },
  data () {
    return {
      avatarUrl: '../../../static/default_avatar.png',
      infoData: {},
      files: []
    }
  },
  methods: {
    getData () {
      let params = {
        userId: localStorage.getItem('userId')
      }
      this.apis.getUserDetail(params).then(res => {
        if (res.code === 200) {
          this.infoData = res.data
        }
      })
    },
    selectHandle (selectedVal) {
      this.infoData.province = selectedVal[0]
      this.infoData.city = selectedVal[1]
    },
    showAddressCascadePicker () {
      this.cascadePicker.show()
    },
    showSexPicker () {
      const column1 = [
        {text: '男', value: 1},
        {text: '女', value: 0}
      ]
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: '选择性别(*^▽^*)',
          data: [column1],
          onSelect: (value) => {
            this.infoData.sex = value[0]
          }
        })
      }
      this.picker.show()
    },
    filesAdded (files) {
      const file = files[0]
      file && this.$refs.upload.removeFile(file)
      let formart = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
      let hasIgnore = false
      const maxSize = 2 * 1024 * 1024 // 1M
      if (typeof file === 'object') {
        if (!formart.includes(file.type)) {
          file.ignore = true
          this.$toast('上传的不是图片文件(jpg,jpeg,png,gif)', 'warn', 1000)
          return false
        } else if (file.size > maxSize) {
          file.ignore = true
          hasIgnore = true
        } else {
          var fileReader = new FileReader()
          fileReader.readAsDataURL(file)
          var that = this
          fileReader.onload = function (e) {
            that.infoData.avatarUrl = e.currentTarget.result
          }
          this.files[0] = file
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        txt: '文件大小不能超过2M'
      }).show()
    },
    updateInfo () {
      if (this.infoData.name === '') {
        this.$toast('请输入用户名')
        return false
      } else if (this.infoData.sign === '') {
        this.$toast('写点什么吧(*^▽^*)')
        return false
      }
      let formData = new FormData()
      formData.append('file[]', this.files[0])
      formData.append('name', this.infoData.name)
      formData.append('sex', this.infoData.sex)
      formData.append('sign', this.infoData.sign)
      formData.append('province', this.infoData.province)
      formData.append('city', this.infoData.city)
      formData.append('userId', localStorage.getItem('userId'))
      let url = '/user/updateUserInfo'
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$post(url, formData, config).then((res) => {
        if (res.code === 200) {
          this.$toast('更新成功', 'correct', 2000)
          setTimeout(() => {
            this.$router.back()
          }, 2000)
        } else if (res.code === -1) {
          this.$toast(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "../../../node_modules/stylus-px2rem"
#editInfo
{
  #main
  {
    overflow hidden
    .avatar-area
    {
      width 100%
      background-color #e7e7e7
      .avatar
      {
        width 35px
        height 35px
        line-height 40px
        margin 0px auto
        border-radius 50%
        padding 15px 0px
        .avatar-btn
        {
          width 100%
          height 100%
          img
          {
            width 100%
            height 100%
            border-radius 50%
          }
        }
      }
    }
    .info
    {
      width 100%
      background-color white
      .row
      {
        display flex
        align-items center
        border-bottom 1px solid #f0f0f0
        position relative
        .name
        {
          width 25px
          padding 5px 2px
        }
        input
        {
          min-width 100px
          padding 5px 5px
          outline:none
        }
        input:disabled
        {
          background-color transparent!important
        }
        i{
          font-size 7px
          position absolute
          right 5px
        }
      }
    }
    .update-btn
    {
      line-height 15px
      color:snow;
      position relative
      top:10px;
      border-radius: 20px;
      background-color: #fd88fa;
      background-image: linear-gradient(90deg, #ffbdd3 0%, #ff6699 100%);
    }
    .grey-area
    {
      width 100%
      height 200px
      background-color #e7e7e7
      padding 20px 0px
      color: #999
    }
  }
}
</style>
